
<template>
  <div class="play1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <!--<video-play @closeVideo="closeVideo" v-if="ishsowvideo" :info="info"></video-play>-->
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'play1',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/hohoplay/1/1.png',
          url: 'static/hohoplay/pdf/1/课件-自由落体.pdf',
          data: [{
            isSelected: 1,
            name: '自由落体',
            url: STATICPATH + '/hohoplay/video/1/K-L1-01/自由落体.mp4'
          }, {
            isSelected: 0,
            name: '自由落体3',
            url: STATICPATH + '/hohoplay/video/1/K-L1-01/自由落体3.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/2.png',
          url: 'static/hohoplay/pdf/1/课件 - 平衡鸟.pdf',
          data: [{
            isSelected: 1,
            name: '平衡点',
            url: STATICPATH + '/hohoplay/video/1/K-L1-02/平衡点.mp4'
          }, {
            isSelected: 0,
            name: '平衡点艺术',
            url: STATICPATH + '/hohoplay/video/1/K-L1-02/平衡点艺术.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/3.png',
          url: 'static/hohoplay/pdf/1/课件-七彩转盘.pdf',
          data: [{
            isSelected: 1,
            name: '陀螺1',
            url: STATICPATH + '/hohoplay/video/1/K-L1-03/陀螺1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/4.png',
          url: 'static/hohoplay/pdf/1/课件 - 神奇成像仪.pdf',
          data: [{
            isSelected: 1,
            name: '光的折射现象',
            url: STATICPATH + '/hohoplay/video/1/K-L1-04/光的折射现象.mp4'
          }, {
            isSelected: 0,
            name: '光为什么会折射',
            url: STATICPATH + '/hohoplay/video/1/K-L1-04/光为什么会折射.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/5.png',
          url: 'static/hohoplay/pdf/1/课件 - 乒乓球弹起来.pdf',
          data: [{
            isSelected: 1,
            name: '弹力1',
            url: STATICPATH + '/hohoplay/video/1/K-L1-05/弹力1.mp4'
          }, {
            isSelected: 0,
            name: '弹力2',
            url: STATICPATH + '/hohoplay/video/1/K-L1-05/弹力2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/6.png',
          url: 'static/hohoplay/pdf/1/课件 - 泡泡满天飞.pdf',
          data: [{
            isSelected: 1,
            name: '泡泡满天飞',
            url: STATICPATH + '/hohoplay/video/1/1-6/泡泡满天飞.mp4'
          },
          {
            isSelected: 0,
            name: '泡泡满天飞2',
            url: STATICPATH + '/hohoplay/video/1/1-6/泡泡满天飞2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/7.png',
          url: 'static/hohoplay/pdf/1/课件 - 玩转七巧板.pdf',
          data: [{
            isSelected: 1,
            name: '七巧板',
            url: STATICPATH + '/hohoplay/video/1/K-L1-07/七巧板.mp4'
          }, {
            isSelected: 0,
            name: '七巧板的来源',
            url: STATICPATH + '/hohoplay/video/1/K-L1-07/七巧板的来源.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/8.png',
          url: 'static/hohoplay/pdf/1/课件 - 魔术石头.pdf',
          data: [{
            isSelected: 1,
            name: '钟乳石1',
            url: STATICPATH + '/hohoplay/video/1/K-L1-08/钟乳石1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/9.png',
          url: 'static/hohoplay/pdf/1/课件-神奇龙卷风.pdf',
          data: [{
            isSelected: 1,
            name: '龙卷风1',
            url: STATICPATH + '/hohoplay/video/1/K-L1-09/龙卷风1.mp4'
          }, {
            isSelected: 0,
            name: '龙卷风2',
            url: STATICPATH + '/hohoplay/video/1/K-L1-09/龙卷风2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/10.png',
          url: 'static/hohoplay/pdf/1/课件-大风车.pdf',
          data: [{
            isSelected: 1,
            name: '1荷兰风车村',
            url: STATICPATH + '/hohoplay/video/1/K-L1-10/1荷兰风车村.mp4'
          }, {
            isSelected: 0,
            name: '1桑斯安斯风车村加',
            url: STATICPATH + '/hohoplay/video/1/K-L1-10/1桑斯安斯风车村加.mp4'
          }, {
            isSelected: 0,
            name: '白努力效应2',
            url: STATICPATH + '/hohoplay/video/1/K-L1-10/白努力效应2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/11.png',
          url: 'static/hohoplay/pdf/1/课件 - 多彩的树叶.pdf',
          data: [{
            isSelected: 1,
            name: '树叶',
            url: STATICPATH + '/hohoplay/video/1/K-L1-11/树叶.mp4'
          }, {
            isSelected: 0,
            name: '树叶二',
            url: STATICPATH + '/hohoplay/video/1/K-L1-11/树叶二.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/12.png',
          url: 'static/hohoplay/pdf/1/课件 - 昆虫的眼睛.pdf',
          data: [{
            isSelected: 1,
            name: '昆虫的眼睛',
            url: STATICPATH + '/hohoplay/video/1/K-L1-12/昆虫的眼睛.mp4'
          }, {
            isSelected: 0,
            name: '昆虫的眼睛2',
            url: STATICPATH + '/hohoplay/video/1/K-L1-12/昆虫的眼睛2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/13.png',
          url: 'static/hohoplay/pdf/1/课件 - 钓鱼游戏.pdf',
          data: [{
            isSelected: 1,
            name: '钓鱼',
            url: STATICPATH + '/hohoplay/video/1/K-L1-13/钓鱼.mp4'
          }, {
            isSelected: 0,
            name: '磁铁游戏',
            url: STATICPATH + '/hohoplay/video/1/K-L1-13/磁铁游戏.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/14.png',
          url: 'static/hohoplay/pdf/1/课件 - 有趣多米诺.pdf',
          data: [{
            isSelected: 1,
            name: '多米诺',
            url: STATICPATH + '/hohoplay/video/1/K-L1-14/多米诺.mp4'
          }, {
            isSelected: 0,
            name: '多米诺2',
            url: STATICPATH + '/hohoplay/video/1/K-L1-14/1多米诺2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/15.png',
          url: 'static/hohoplay/pdf/1/课件 - 海螺壳的声音.pdf',
          data: [{
            isSelected: 1,
            name: '聲音的產生',
            url: STATICPATH + '/hohoplay/video/1/K-L1-15/01. 聲音的產生ok.mp4'
          }]
        },
        {
          img: 'static/hohoplay/1/16.png',
          url: 'static/hohoplay/pdf/1/课件 - 神奇的静电.pdf',
          data: [{
            isSelected: 1,
            name: '静电1',
            url: STATICPATH + '/hohoplay/video/1/K-L1-16/静电1.mp4'
          }, {
            isSelected: 0,
            name: '静电2',
            url: STATICPATH + '/hohoplay/video/1/K-L1-16/静电2.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.play1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 35px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
  z-index: 10;
}
</style>
